<template>
    <title-box title="告警记录">
        <basic-table ref="tableRef" :params="params" :load="false" :columns="columns" :query="query" :selectbox="false" :expanded-row-render="expandedRowRender">
            <template #table="{ body }">
                <template v-if="body.column.key === 'status'">
                    <a-tag v-if="body.record.status === 1" color="warning">进行中</a-tag>
                    <a-tag v-if="body.record.status === 2" color="processing">已恢复</a-tag>
                </template>
                <template v-if="body.column.key === 'endTime'">
                    {{ body.record.endTime || '--' }}
                </template>
            </template>
        </basic-table>
    </title-box>
</template>
<script setup>
import { onMounted, reactive, ref, watch } from 'vue'
import TitleBox from '/@/components/TitleBox/index.vue'
import { Table } from 'ant-design-vue'
import { BasicTable } from '@iframe/tools/components/index.js'
import { query } from '/@/api/Inverter/Alarm/index.js'

const props = defineProps({
    devicesId: {
        type: Number
    }
})

const tableRef = ref()
const params = reactive({
    devicesId: props.devicesId
})
const columns = ref([
    Table.EXPAND_COLUMN, // 添加展开列
    {
        title: '告警状态',
        dataIndex: 'status',
        key: 'status',
        width: 150,
        align: 'center'
    },
    {
        title: '序列号',
        dataIndex: 'no',
        key: 'no',
        width: 250,
        align: 'center'
    },
    {
        title: '序列型号',
        dataIndex: 'code',
        key: 'code'
    },
    {
        title: '开始时间',
        dataIndex: 'beginTime',
        key: 'beginTime',
        width: 250,
        align: 'center'
    },
    {
        title: '结束时间',
        dataIndex: 'endTime',
        key: 'endTime',
        width: 250,
        align: 'center'
    }
])
const expandedRowRender = record => {
  if(record.children && record.children.length > 0) {
    return (<a-table
          columns={[
            {
              title: '告警编码',
              dataIndex: 'errorCode',
              key: 'errorCode',
              width: 120,
              align: 'center'
            },
            {
              title: '告警等级',
              dataIndex: 'grade',
              key: 'grade',
              width: 150,
              align: 'center'
            },
            {
              title: '告警名称',
              dataIndex: 'name',
              key: 'name',
              width: 250
            },
            {
              title: '开始时间',
              dataIndex: 'beginTime',
              key: 'beginTime',
              width: 250,
              align: 'center'
            },
            {
              title: '结束时间',
              dataIndex: 'endTime',
              key: 'endTime',
              width: 250,
              align: 'center'
            },
            {
              title: '推荐方案',
              dataIndex: 'solution',
              key: 'solution'
            }
          ]}
          dataSource={record.children}
          pagination={false}
          rowKey={(record) => record.id}
      />)
  }
  return null

}

const alarmColumns = ref([
  {
    title: '告警编码',
    dataIndex: 'errorCode',
    key: 'errorCode',
    width: 120,
    align: 'center'
  },
    {
        title: '告警等级',
        dataIndex: 'grade',
        key: 'grade',
        width: 150,
        align: 'center'
    },
    {
        title: '告警名称',
        dataIndex: 'name',
        key: 'name',
        width: 250
    },
    {
        title: '开始时间',
        dataIndex: 'beginTime',
        key: 'beginTime',
        width: 250,
        align: 'center'
    },
    {
        title: '结束时间',
        dataIndex: 'endTime',
        key: 'endTime',
        width: 250,
        align: 'center'
    },
    {
        title: '推荐方案',
        dataIndex: 'solution',
        key: 'solution'
    }
])
onMounted(() => {
    queryAlarm()
})

const queryAlarm = () => {
    if (props.devicesId) {
        tableRef.value.handleRefresh()
    }
}

watch(
    () => props.devicesId,
    () => {
        queryAlarm()
    }
)
</script>
